import { ref, onMounted, onUnmounted } from 'vue'
import { prefersReducedMotion, getDevicePerformance } from '@/utils/performance'

/**
 * 响应式动画 Composable
 * 根据设备性能和用户偏好自动调整动画效果
 */
export function useResponsiveAnimation() {
  const shouldReduceMotion = ref(false)
  const devicePerformance = ref('high')
  const isMobile = ref(false)

  onMounted(() => {
    // 检测用户是否偏好减少动画
    shouldReduceMotion.value = prefersReducedMotion()

    // 检测设备性能
    const performance = getDevicePerformance()
    
    // 根据设备信息判断性能等级
    if (performance.cores <= 2 || performance.memory <= 2) {
      devicePerformance.value = 'low'
    } else if (performance.cores <= 4 || performance.memory <= 4) {
      devicePerformance.value = 'medium'
    } else {
      devicePerformance.value = 'high'
    }

    // 检测是否为移动设备
    isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

    // 监听用户偏好变化
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
    const handleChange = (e) => {
      shouldReduceMotion.value = e.matches
    }
    
    mediaQuery.addEventListener('change', handleChange)

    // 清理
    onUnmounted(() => {
      mediaQuery.removeEventListener('change', handleChange)
    })
  })

  /**
   * 获取动画配置
   */
  const getAnimationConfig = (options = {}) => {
    const {
      duration = 0.6,
      delay = 0,
      easing = 'ease-out'
    } = options

    // 如果用户偏好减少动画，返回最小配置
    if (shouldReduceMotion.value) {
      return {
        duration: 0,
        delay: 0,
        easing: 'linear',
        disabled: true
      }
    }

    // 根据设备性能调整
    let adjustedDuration = duration
    let adjustedDelay = delay

    if (devicePerformance.value === 'low') {
      adjustedDuration *= 0.5
      adjustedDelay *= 0.5
    } else if (devicePerformance.value === 'medium') {
      adjustedDuration *= 0.75
      adjustedDelay *= 0.75
    }

    // 移动设备上减少动画时长
    if (isMobile.value) {
      adjustedDuration *= 0.8
    }

    return {
      duration: adjustedDuration,
      delay: adjustedDelay,
      easing,
      disabled: false
    }
  }

  /**
   * 是否应该禁用动画
   */
  const shouldDisableAnimation = () => {
    return shouldReduceMotion.value || devicePerformance.value === 'low'
  }

  /**
   * 获取推荐的粒子数量
   */
  const getRecommendedParticleCount = (defaultCount = 50) => {
    if (shouldReduceMotion.value) return 0
    
    if (devicePerformance.value === 'low') {
      return Math.floor(defaultCount * 0.3)
    } else if (devicePerformance.value === 'medium') {
      return Math.floor(defaultCount * 0.6)
    }
    
    return defaultCount
  }

  /**
   * 获取推荐的帧率
   */
  const getRecommendedFPS = () => {
    if (devicePerformance.value === 'low') return 30
    if (devicePerformance.value === 'medium') return 45
    return 60
  }

  return {
    shouldReduceMotion,
    devicePerformance,
    isMobile,
    getAnimationConfig,
    shouldDisableAnimation,
    getRecommendedParticleCount,
    getRecommendedFPS
  }
}

/**
 * 动画性能优化 Hook
 * 自动应用性能优化策略
 */
export function useAnimationOptimization() {
  const { shouldDisableAnimation, devicePerformance } = useResponsiveAnimation()

  /**
   * 为元素添加性能优化
   */
  const optimizeElement = (element) => {
    if (!element) return

    // 使用 will-change 提示浏览器优化
    if (devicePerformance.value !== 'low') {
      element.style.willChange = 'transform, opacity'
    }

    // 使用 GPU 加速
    element.style.transform = 'translateZ(0)'
  }

  /**
   * 清理优化
   */
  const cleanupOptimization = (element) => {
    if (!element) return
    
    element.style.willChange = 'auto'
    element.style.transform = ''
  }

  /**
   * 节流动画帧
   */
  const throttleAnimationFrame = (callback, fps = 60) => {
    let lastTime = 0
    const interval = 1000 / fps

    return (currentTime) => {
      if (currentTime - lastTime >= interval) {
        lastTime = currentTime
        callback(currentTime)
      }
    }
  }

  return {
    shouldDisableAnimation,
    devicePerformance,
    optimizeElement,
    cleanupOptimization,
    throttleAnimationFrame
  }
}

